import React, { Component, useState, useReducer, useEffect } from "react";
import { connect } from "react-redux";
import { View, Image, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";

import XzTabs from "../../components/tabs";

import "./index.scss";

const searchIcon = require("../../assets/images/home/search.png");
const waterfallData: any[] = [
  { img: "http://img.mm4000.com/file/d/e0/7728be28a5_1044.jpg" },
  {
    img: "https://img.zcool.cn/community/01359b5c345790a8012029ace2f083.jpg",
  },
  {
    img: "http://img.qingwk.com/images/resource/global/2020/10/13/1510141_30114119199.jpg",
  },
  {
    img: "https://www.mangoxo.com/album/getPic?id=112416&url=album/data/2496/1db7425734ba4327bb94819ac92add36.png",
  },
  { img: "http://img.mm4000.com/file/d/e0/7728be28a5_1044.jpg" },
  {
    img: "https://img.zcool.cn/community/01359b5c345790a8012029ace2f083.jpg",
  },
];
function tabChange(e: any) {
  console.log("子传给我的", e);
}

//瀑布流组件
function WaterfallItem(props) {
  const [item] = useState(props.data);
  console.log(item);
  return (
    <View className="waterfall-item">
      <Image
        src={item.img}
        mode="widthFix"
        className="waterfall-item--img"
      ></Image>
    </View>
  );
}

function Index(props) {
  //state数据
  const initData: any[] = [];
  const [leftData, setLeftData] = useState(initData);
  const [rightData, setRightData] = useState(initData);
  const leftDataCopy = leftData.slice(0);
  const rightDataCopy = rightData.slice(0);
  // setLeftData(leftDataCopy);

  function waterfallAsync() {
    return new Promise((reslove) => {
      setTimeout(() => {
        const query = Taro.createSelectorQuery();
        query
          .select(".home__waterfall__left")
          .boundingClientRect()
          .select(".home__waterfall__right")
          .boundingClientRect()
          .exec((res) => {
            reslove({ left: res[0].height, right: res[1].height });
          });
        // waterfallFun();
      }, 200);
    });
  }
  useEffect(() => {
    async function asyncFetch() {
      if (waterfallData.length === 0) return;
      const item = waterfallData.splice(0, 1);
      const result: any = await waterfallAsync();
      console.log(result.left, result.right, result.left > result.right);
      if (result.left > result.right) {
        setRightData([...rightData, ...item]);
      } else {
        setLeftData([...leftData, ...item]);
      }
    }
    asyncFetch();
  }, [leftData, rightData]);
  console.log("输出数据", rightData, leftData, waterfallData);

  return (
    <View className="home">
      <View className="home__group">
        {/* 搜索框 */}
        <View className="flex justify-between align-center home__search">
          <Image className="home__search--icon" src={searchIcon} />
          <View className="home__search--button">搜索</View>
        </View>
        {/* 推荐栏目 */}
        <View className="home__banner"></View>
      </View>
      {/* tab部分 */}
      <XzTabs onChange={(e: any) => tabChange(e)}></XzTabs>
      {/* 瀑布流部分 */}
      <View className="flex justify-between align-start home__waterfall">
        <View className="home__waterfall__left">
          {leftData.map((item) => {
            return <WaterfallItem data={item} />;
          })}
        </View>
        <View className="home__waterfall__right">
          {rightData.map((item) => {
            return <WaterfallItem data={item} />;
          })}
        </View>
      </View>
    </View>
  );

}

const mapStateToProps = (state: any) => state.safeArea;

export default connect(mapStateToProps)(Index);
